<template>
  <div class="medium-table-btn-container">
    <div>
      <Title :isShow="!!resourceData.data && resourceData.data.total > 0" :total="resourceData.data?resourceData.data.total:''" title="搜索结果" style="margin: 24px 0;"/>
    </div>
    <!-- <span style="flex:1;" /> -->
    <SelectionNum :select-item="selectItem" style="flex:1;" @clearMixinSelection="clearMixinSelection" />
    <template >
      <div v-if="expandRowKeysAll.length" class="expend-key" @click="handleExpendKeys(expendStatus)">
        {{ expendStatus ? '收起' : '展开' }}
        <i :class="!expendStatus ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" />
      </div>
      <export-button
        v-if="tabIsAll && hasRouteAuth('medium:operator:export')"
        ref="exportButton"
        :query-data="{}"
        :export-name="'资源列表'"
        is-before-export
        style="margin-right: 16px;"
        export-api="/admin/medium/exportAll"
        @beforeExport="beforeExport"
        @onComplate="completeExport"
      />
      <!-- 导出 -->
      <el-tooltip
        v-if="!tabIsAll && hasRouteAuth('medium:operator:export')"
        effect="dark"
        content="导出"
        placement="top">
        <div style="margin-right: 24px;cursor: pointer;" @click="exportExcelShow">
          <img :src="ExportIcon" style="width: 16px;height: 16px;" alt="">
        </div>
      </el-tooltip>
      <!-- 导入,全部tab没有 -->
      <import-button
        v-if="!tabIsAll && hasRouteAuth('medium:operator:import')"
        :import-api="'/admin/medium/import'"
        :is-medium="true"
        :extend-params="{platformType: activeTabs}"
        :get-list="importFetchData"
        style="margin-right: 24px"/>
      <el-tooltip v-if="!tabIsAll && hasRouteAuth('medium:operator:merge')" effect="dark" placement="top" content="合并资源">
        <div class="all-merge-btn" @click="mergeShow">
          <img src="../../../assets/merge-cells.png" alt="">
        </div>
      </el-tooltip>
    </template>
    <ExportExcel
      ref="exportExcelMask"
      :tabs="tabs"
      :select-params="selectParams"
      :select-item="selectItem"
      :active-tabs="activeTabs" />
    <mergeList ref="mergeList" @freshData="importFetchData" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
import ExportExcel from '@/components/MediumPage/ExportExcelMask';
import ImportButton from '@/components/MediumPage/mediumImport/import';
import ExportButton from '@/components/ExportButton';
import Title from '@/components/Title';
import ExportIcon from '@/assets/export.png';
import mergeList from '@/components/resource/merge/mergeList';

export default {
  components: { ExportExcel, ImportButton, Title, mergeList, ExportButton },
  props: {
    paramsOptions: {
      type: Array,
      default: null
    },
    resourceData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    inputFilter: {
      type: Object,
      default: null
    },
    activeTabs: {
      type: String | Number,
      default: ''
    },
    selectParams: {
      type: String,
      default: 'single'
    },
    tabs: {
      type: Array,
      default: null
    },
    selectItem: {
      type: Array,
      default: () => {
        return [];
      }
    },
    expandRowKeysAll: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ExportIcon,
      expendStatus: 0 // 收起状态
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'userAuthType': state => state.medium.userAuthType
    }),
    tabIsAll() {
      return this.activeTabs === '';
    }
  },
  watch: {
    expandRowKeysAll(newV) {
      // 收起状态切换保持
      if (!newV.length || !this.expendStatus) return;
      // this.expendStatus = 0;
      this.handleExpendKeys(0);
    }
  },
  methods: {
    hasRouteAuth,
    mergeShow() {
      if (this.$refs.mergeList) this.$refs.mergeList.dialogShow(this.activeTabs);
    },
    // 导入excel后调用的方法
    importFetchData() {
      this.$emit('getMediumData');
    },
    // 导出excel
    exportExcelShow() {
      const params = {
        options: encodeURIComponent(JSON.stringify(this.paramsOptions)),
        platformType: this.activeTabs,
        ...this.inputFilter
      };
      // const params = {
      //   options: encodeURI(JSON.stringify(this.paramsOptions)),
      //   page: this.page,
      //   perPage: this.perPage,
      //   platformType: this.activeTabs
      // };
      this.$refs.exportExcelMask.tabMaskShow(params);
    },
    handleExpendKeys(status) {
      this.expendStatus = 1 ^ status;
      const val = this.expendStatus ? JSON.parse(JSON.stringify(this.expandRowKeysAll)) : [];
      this.$emit('handleExpendKeys', val);
    },
    findPlatformId(name) {
      const text = name.indexOf('直播') >= 0 ? '直播' : name;
      const item = this.tabs.find(i => i.label === text);
      return item ? item.key : 5;
    },
    // 在全部tab下的导出逻辑
    beforeExport() {
      const uploadId = this.createUploadId();
      const params = {
        options: this.paramsOptions ? encodeURIComponent(JSON.stringify(this.paramsOptions)) : '',
        uploadId,
        ...this.inputFilter
      };
      this.$confirm('是否确定导出资源', '', {
        iconClass: 'del-icon',
        customClass: 'del-message del-message-cancel',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning'
      }).then(() => {
        let ids = [];
        if (this.selectItem && this.selectItem.length) {
          ids = this.selectItem.map(i => i.mediumId);
        }
        params.ids = ids.join(',');
        this.$refs.exportButton.btnExport(params);
      }).catch(() => {
        return false;
      });
    },
    completeExport() {

    },
    // 生成上传唯一标识，用于获取进度
    createUploadId() {
      const userId = this.userInfo.id;
      const timestamp = (new Date()).valueOf();
      return `${userId}${timestamp}`;
    },
    clearMixinSelection() {
      this.$emit('clearMixinSelection');
    }
  }
};
</script>
<style lang="scss" scoped>
.merge-btn {
  font-size: 18px;
  color: #888;
  margin-right: 20px;
  cursor: pointer;
}
.medium-table-btn-container {
    // position: absolute;
    right: 20px;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    display: flex;
    .tools-btn {
      font-size:14px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color: #406EFF;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      height: 32px;
      background-color: #fff;
      border-radius: 4px;
      border: solid 1px #406EFF;
      cursor: pointer;
      &:hover {
        background-color: #406EFF;
        color: #fff;
      }
      img {
        width: 13px;
        height: 12px;
        margin-right: 5px;
      }
    }
    .expend-key {
      margin-right: 24px;
      cursor: pointer;
      user-select: none;
      color: #406EFF;
    }
  }

.all-merge-btn {
  cursor: pointer;
  width: 32px;
  height: 32px;
  background-color: #eff3fb;
  color: #406EFF;
  font-size: 16px;
  line-height: 32px;
  border-radius: 4px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 16px;
    height: 16px;
  }
}
</style>
